<template>
  <div>
    <el-row :gutter="20">
      <div class="app-container">
        <el-row type="flex" justify="start" align="middle">
          <el-col :span="2"
            ><span class="el-custom-title"
              >产品工序线</span
            ></el-col
          >
          <el-col :span="15" style="font-size:13px;">
            <span>编号: </span>
            <el-autocomplete
              class="inline-input"
              style="max-width:120px;font-size:13px;"
              v-model="queryConditions.productProcedureNo"
              :fetch-suggestions="querySearch"
              placeholder="请输入编号"
              @select="handleSelect"
              @input="handleInput"
            ></el-autocomplete>
          </el-col>
          <el-col :span="7" style="float:right;">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-search"
                class="el-button--mini"
                @click="ui_query"
                >查询</el-button
              >
            </el-button-group>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-table
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            @row-click="rowClick"
          >
            <el-table-column align="center" label="序号" width="95">
              <template slot-scope="scope">
                {{ scope.row.rowNum }}
              </template>
            </el-table-column>
             <el-table-column align="center" label="生产工序编号" width="120">
              <template slot-scope="scope">
                {{ scope.row.productProcedureNo }}
              </template>
            </el-table-column>
             <el-table-column align="center" label="生产工序名称" width="120">
              <template slot-scope="scope">
                {{ scope.row.productProcedureName }}
              </template>
            </el-table-column>
             <el-table-column align="center" label="产品编号" width="95">
              <template slot-scope="scope">
                {{ scope.row.productNo }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="产品数量"
              width="95"
            >
              <template slot-scope="scope">
                {{ scope.row.productQty }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            :page-sizes="listQuery.pageSizes"
            @pagination="fetchData"
          />
        </el-row>
      </div>
    </el-row>
    <el-row>
      <el-tabs type="border-card">
         <el-tab-pane label="产品">
           <mesproductprocedurechild></mesproductprocedurechild>
         </el-tab-pane>
        <el-tab-pane label="工序支线">
          <mesproductbranchchild
            :mesproductprocedureid="
              this.lstSelected != null && this.lstSelected.length > 0
                ? this.lstSelected[0].id
                : 0
            "
          ></mesproductbranchchild>
        </el-tab-pane>
        <el-tab-pane label="工序">
          <mesprocedurechild
            :mesproductprocedureid="
              this.lstSelected != null && this.lstSelected.length > 0
                ? this.lstSelected[0].id
                : 0
            "
          ></mesprocedurechild>
        </el-tab-pane>
        <el-tab-pane label="物料/半成品明细(投料BOM">
        <mesproducematerialbomchild></mesproducematerialbomchild>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import {
  getAll,
  getOne,
  getList,
  create,
  update,
  deleteBatch
} from "@/api/procedure/product/mesProductProcedure";

import { getAll as getAllProduceProcedures } from "@/api/procedure/produce/mesProduceProcedure";
import { getAll as getAllOrderProductNoDtls,getProcedureProductQty } from "@/api/sale/saleOrderProductNoDtl";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import mesproductbranchchild from "@/views/produce/technologyQuery/mesproductBranchChild";
import store from "@/store/index";
import moment from "moment";
import mesprocedurechild from "@/views/produce/technologyQuery/mesProcedureChild";
import mesproductprocedurechild from "@/views/produce/technologyQuery/mesProductProcedureChild"
import mesproducematerialbomchild from "@/views/produce/technologyQuery/mesProduceMaterialBomChild"


export default {
  components: { Pagination, mesproductbranchchild, mesprocedurechild, mesproductprocedurechild,mesproducematerialbomchild},
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 6,
        pageSizes: [6, 10, 14]
      },
      currentProductProcedureId: 0,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
        dispatchTxt: "订单下发"
      },
      dialogDispatchVisible: false,

      //表格變量
      lstSelected: [],
      ddProductProcedures: [],
      ddProduceProcedures: [],
      temp: {
        id: 0,
        productProcedureNo: "",
        productProcedureName: "",
        produceProcedureId: 0,
        orderId: 0,
        productId: 0
      },
      queryConditions: {
        productProcedureNo: "",
      },
      lstStatus: [
        { label: "请选择", value: -1 },
        { label: "已提交", value: 0 },
        { label: "未审核", value: 1 },
        { label: "已审核", value: 2 },
        { label: "审核未通过", value: 3 }
      ],
      selectedNo: "",
      ddOrders: [], //订单
      cacheddProduts: [], //订单缓存
    };
  },
  filters: {
    resolveEnableValue(p) {
      return p ? "是" : "否";
    },
    formatDate(nowTime) {
      var moment = require("moment");
      return moment(nowTime).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  computed: {
    audittime: {
      get() {
        return moment(this.temp.audittime).format("YYYY-MM-DD HH:mm:ss");
      },
      set(val) {
        this.temp.audittime = moment(val).format("YYYY-MM-DD HH:mm:ss");
      }
    },
    createtime: {
      get() {
        return moment(this.temp.createtime).format("YYYY-MM-DD HH:mm:ss");
      },
      set(val) {
        this.temp.createtime = moment(val).format("YYYY-MM-DD HH:mm:ss");
      }
    },
    updatetime: {
      get() {
        return moment(this.temp.updatetime).format("YYYY-MM-DD HH:mm:ss");
      },
      set(val) {
        this.temp.updatetime = moment(val).format("YYYY-MM-DD HH:mm:ss");
      }
    },
    deletetime: {
      get() {
        return moment(this.temp.deletetime).format("YYYY-MM-DD HH:mm:ss");
      },
      set(val) {
        this.temp.deletetime = moment(val).format("YYYY-MM-DD HH:mm:ss");
      }
    }
  },
  watch: {},
  created() {
    this.fetchData();
    this.getAllProductProcedures();
    this.getAllProduceProcedures();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      let params = {
        page: this.listQuery.page,
        size: this.listQuery.limit
      };
      params = Object.assign(params, this.queryConditions);
      getProcedureProductQty(params).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    ui_query() {
      debugger
      this.$loading = true;
        let params = {
        page: this.listQuery.page,
        size: this.listQuery.limit
      };
      params = Object.assign(params, this.queryConditions);
      getProcedureProductQty(params).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.$loading = false;
      });
    },
    resetTemp() {
      this.temp = {
        id: 0,
        productProcedureNo: "",
        productProcedureName: "",
        produceProcedureId: 0,
        orderId: 0,
        productId: 0
      };
    },
    rowClick(row, column, event) {
      this.lstSelected.length = 0;
      this.lstSelected.push(row);
      this.currentProductProcedureId = row.id;
    },
    handleMainTypeChange(val) {
      this.getSelParentIdOptions();
    },
    querySearch(queryString, cb) {
      let productProcedures = this.ddProductProcedures;
      let results = queryString
        ? productProcedures.filter(this.createFilter(queryString))
        : productProcedures;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return p => {
        return p.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    getAllProductProcedures() {
      this.ddProductProcedures.length = 0;
      getAll().then(response => {
        let r = response.data.map(v => {
          return { value: v.productProcedureNo };
        });
        this.ddProductProcedures = this.ddProductProcedures.concat(r);
      });
    },
    getAllProduceProcedures() {
      this.ddProduceProcedures.length = 0;
      this.ddProduceProcedures.splice(0, 0, {
        value: "",
        label: "请选择",
        produceProcedureName: ""
      });
      getAllProduceProcedures().then(response => {
        let r = response.data.map(v => {
          return {
            value: v.produceProcedureNo,
            label: v.produceProcedureName,
            produceProcedureName: v.produceProcedureName
          };
        });
        this.ddProduceProcedures = this.ddProduceProcedures.concat(r);
      });
    },
    handleSelect(val) {
      this.queryConditions.productProcedureNo = val.value;
    },
    handleInput(val) {
      this.queryConditions.productProcedureNo = val;
    },
    handleDateSelectChange(val) {
      this.queryConditions.updateStartTime = moment(val[0]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.queryConditions.updateEndTime = moment(val[1]).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    },
    resolveStatusValue(p) {
      let itm = this.lstStatus.find(v => {
        return v.value == p;
      });
      return itm == null ? "未知" : itm.label;
    },
    //生产工序线选择事件
    handleProduceProcedureSelectChange(val) {
      //
      if (val != null) {
        let itm = this.ddProduceProcedures.find(v => {
          return v.value == val;
        });
        if (itm != null) {
          this.temp.productProcedureName = itm.produceProcedureName;
        } else {
          this.temp.productProcedureName = "";
        }
      }
    },
    getAllOrderProductNos() {
      this.ddOrders.length = 0
      this.ddProducts.length = 0
      this.cacheddProduts.length = 0
      sessionStorage.setItem("products",null);
      this.ddOrders.push({ id: 0, orderNo: "请选择" });
       this.ddProducts.splice(0, 0, {
          productId: 0,
          productNo: "请选择",
        });
      getAllOrderProductNoDtls().then(response => {
        let r = response.data.map(v => {

          let index = this.ddOrders.findIndex(o => {
             return o.id == v.sdorderId;
          });

          if (index < 0) {
            this.ddOrders.push({ id: v.sdorderId, orderNo: v.orderNo });
          }

          //产品编号
           let index2 = this.ddProducts.findIndex(o => {
            return o.productId == v.productId;
          });

          if (index2 < 0) {
            this.ddProducts.push({
              productId: v.productId,
              productNo: v.productNo
            });
          }
        });
        this.cacheddProducts = response.data;
        this.cacheddProducts.splice(0, 0, {
          productId: 0,
          productNo: "请选择"
        });
        sessionStorage.setItem(
          "products",
          JSON.stringify(this.cacheddProducts)
        );
      });
    },
    handleOrderSelectChange(val) {
      this.cacheddProducts = JSON.parse(sessionStorage.getItem("products"));
      if (val == 0) {
      } else {
        this.ddProducts.length = 0;
        this.cacheddProducts.map(o => {
          if (o.sdorderId == val) {
            this.ddProducts.push({
              productId: o.productId,
              productNo: o.productNo
            });
          }
        });
        this.ddProducts.splice(0, 0, {
          productId: 0,
          productNo: "请选择",
          sdOrderId: 0,
          orderNo: "请选择"
        });
      }
    },
  }
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
